<template>
  <div>
    <!--标签栏，底部固定，使用路由模式，标签栏应是footer，上部代码应均为children被嵌套的路由-->
    <h1 style="text-align: center">聚宝阁首页</h1>

    <van-search class="city-search"  v-model="value" placeholder="想要啥？快来搜搜" />

    <van-divider />
    <!--主页轮播图，静态资源-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

      <van-swipe-item>
        <van-image
            width="15rem"
            height="10rem"
            fit="contain"
            src="../images/apple.png"
        />
      </van-swipe-item>

      <van-swipe-item>
        <van-image
            width="15rem"
            height="10rem"
            fit="contain"
            src="../images/babyDragon.jpeg"
        />
      </van-swipe-item>

      <van-swipe-item>
        <van-image
            width="15rem"
            height="10rem"
            fit="contain"
            src="../images/apple.png"
        />
      </van-swipe-item>
      <van-swipe-item>
        <van-image
            width="15rem"
            height="10rem"
            fit="contain"
            src="../images/babyDragon.jpeg"
        />
      </van-swipe-item>
    </van-swipe>

    <!--分割线-->
    <van-divider />

    <!--宫格子-->
    <van-grid :gutter="10">
      <van-grid-item icon="location-o" text="热卖红酒" />
      <van-grid-item icon="phone-o" text="古代水果" />
      <van-grid-item icon="music-o" text="飞龙宝宝" />
      <van-grid-item icon="smile-o" text="82年苹果" />
      <van-grid-item icon="shop-o" text="古董新鲜送" />
      <van-grid-item icon="award-o" text="诗书字画" />
      <van-grid-item icon="hot-o" text="清朝iphone" />
      <van-grid-item icon="flag-o" text="解压中药" />
    </van-grid>

    <!--分割线-->
    <van-divider />

    <!--宫格商品简介-->
    <van-grid :border="true" :column-num="2">
      <van-grid-item v-for="(o, index) in 4" :key="o">
        <van-image src="../images/apple.png" />
      </van-grid-item>
      <van-grid-item v-for="(o, index) in 4" :key="o">
        <van-image src="../images/orange.png" />
      </van-grid-item>
      <van-grid-item v-for="(o, index) in 4" :key="o">
        <van-image src="../images/babyDragon.jpeg" />
      </van-grid-item>
    </van-grid>

    <router-view/>
    <!--以下是不变的-->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">逛</van-tabbar-item>
      <van-tabbar-item icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      value: '',
    };
  },
}
</script>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 100px;
  text-align: center;
  background-color: #ffffff;
}

.city-search {
  background-color: #F7F8FA;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 2.3rem;
  width: 94vw;
  margin: 2vw 4vw;
  border-radius: 8px;
}
</style>